<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>第三方应用</el-breadcrumb-item>
      <el-breadcrumb-item>公众号列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="query">
      <div>公众号列表</div>
      <div style="display: flex">
        <div style="display: flex">
          <!-- <span>公众号类型</span> -->
          <el-select
            v-model="searchForm.official"
            placeholder="请选择"
            size="mini"
          >
            <el-option label="订阅号" value="2"></el-option>
            <el-option label="服务号" value="1"></el-option>
          </el-select>
          <!-- <span>公众号名称</span> -->
          <el-input
            size="mini"
            placeholder="请输入公众号名称"
            v-model="searchForm.name"
            prefix-icon="el-icon-search"
            maxlength="50"
          >
          </el-input>
          <el-button
            @click="searchEvent"
            v-on:keyup.enter="searchEvent"
            style="margin-left: 10px"
            type="primary"
            size="mini"
            >搜索</el-button
          >
          <el-button @click="setEvent()" size="mini">重置</el-button>
        </div>
        <el-button
          style="margin-left: 20px"
          type="primary"
          size="mini"
          @click="fixData(1)"
          >新增公众号</el-button
        >
      </div>
    </div>
    <div class="table">
      <el-table
        stripe
        align="center"
        :data="tableData.list"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column label="公众号名称" min-width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.wxName"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.wxName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="公众号类型" min-width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-select
                v-model="scope.row.type"
                placeholder="请选择"
                size="mini"
              >
                <el-option label="订阅号" value="2"></el-option>
                <el-option label="服务号" value="1"></el-option>
              </el-select>
            </template>
            <span v-else>{{ scope.row.type == 1 ? "服务号" : "订阅号" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属部门" min-width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-select
                :value="scope.row.salesPermission"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="items in selectList"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </template>
            <span v-else>{{ scope.row.salesPermission }}</span>
          </template>
        </el-table-column>

        <el-table-column label="商户名称" min-width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-select
                v-model="scope.row.payName"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="items in merchantlist"
                  :key="items.id"
                  :label="items.name"
                  :value="items.id"
                ></el-option>
              </el-select>
            </template>
            <span v-else>{{ scope.row.payName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="令牌(token)" min-width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.token"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.token }}</span>
          </template>
        </el-table-column>

        <el-table-column label="APP ID" min-width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.appId"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.appId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="APP Secret" min-width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.appSecret"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.appSecret }}</span>
          </template>
        </el-table-column>

        <el-table-column label="图片" min-width="110">
          <template slot-scope="scope">
            <p v-if="scope.row.sendImages">
              <el-image
                v-image-preview
                :src="ImgHttps + getImageBySrc(scope.row.sendImages)"
                style="width: 40px; height: 40px; cursor: pointer"
              ></el-image>
            </p>
            <p v-else>/</p>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" min-width="110">
          <template slot-scope="scope">
            {{ $moment(scope.row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="140" fixed="right">
          <template slot-scope="scope">
            <div class="option">
              <!-- v-if="" -->
              <!-- <span
                v-if="parArray.indexOf('fieldPrevent') != -1 && scope.row.edit"
                @click="update(scope.row)"
                >保存</span
              > -->
              <!-- <span
                v-if="scope.row.edit && parArray.indexOf('fieldPrevent') != -1"
                @click="cancelEdit(scope.row)"
                >取消</span
              > -->
              <span
                v-if="parArray.indexOf('fixOfficialCode') != -1"
                @click="fixData(2, scope.row)"
                >修改</span
              >
              <span
                v-if="parArray.indexOf('delectOfficialCode') != -1"
                @click="delectEvent(scope.row)"
                >删除</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 50px"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="tableData.totalPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
    <el-dialog
      :title="param == 1 ? '新增公众号' : '修改公众号'"
      append-to-body
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form
        :model="addData"
        ref="addData"
        :rules="addDataRules"
        label-width="135px"
        label-position="left"
      >
        <el-form-item label="公众号名称" prop="name">
          <el-input
            v-model="addData.name"
            placeholder="请输入公众号名称"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="公众号ID" prop="gzId">
          <el-input
            v-model="addData.gzId"
            placeholder="请输入公众号ID"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="APP ID" prop="appid">
          <el-input
            size="small"
            v-model="addData.appid"
            placeholder="请输入APP ID"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="公众号类型" prop="official">
          <el-select
            v-model="addData.official"
            placeholder="请选择"
            size="small"
          >
            <el-option label="订阅号" value="2"></el-option>
            <el-option label="服务号" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属部门" prop="department">
          <el-select
            v-model="addData.department"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="items in selectList"
              :key="items.dictId"
              :label="items.dictName"
              :value="items.dictId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商户名称">
          <el-select
            clearable
            v-model="addData.merchant"
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="items in merchantlist"
              :key="items.id"
              :label="items.name"
              :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="令牌(token)" prop="token">
          <el-input
            size="small"
            v-model="addData.token"
            placeholder="请输入令牌"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="EncodingAESKey" prop="aesKey">
          <el-input
            size="small"
            v-model="addData.aesKey"
            placeholder="请输入消息加解密密钥"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="APP Secret" prop="secret">
          <el-input
            size="small"
            v-model="addData.secret"
            placeholder="请输入APP Secret"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="上传图片" prop="images">
          <el-upload
            class="video"
            ref="upload"
            action="#"
            :limit="1"
            :on-exceed="test"
            :before-upload="beforeUploadImg"
            :http-request="imgUpload"
            :file-list="fileListImg"
            :show-file-list="false"
          >
            <i class="el-icon-upload2" style="font-size: 25px"></i>
          </el-upload>
          <div>
            <div
              v-for="(item, index) in fileListImg"
              :key="index"
              style="
                display: inline-block;
                padding: 2px;
                margin-right: 5px;
                position: relative;
              "
            >
              <el-image
                v-image-preview
                :src="ImgHttps + item.img"
                style="width: 50px; height: 50px"
              ></el-image>
              <i
                @click="deleteImg(index)"
                class="el-icon-error"
                style="
                  position: absolute;
                  top: -4px;
                  right: -6px;
                  cursor: pointer;
                "
              ></i>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            (dialogVisible = false),
              $refs['addData'].resetFields(),
              (fileListImg = [])
          "
          size="mini"
          >取 消</el-button
        >
        <el-button
          v-if="param == 1"
          type="primary"
          @click="add('addData')"
          size="mini"
          >确 定</el-button
        >

        <el-button
          v-if="param == 2"
          type="primary"
          @click="update('addData')"
          size="mini"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as imageConversion from "image-conversion";
export default {
  data () {
    return {
      searchForm: {
        official: "",
        name: "",
      },
      dialogVisible: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      applicationNames: [],
      param: 1, //1 新增 2修改
      addData: {
        name: "",
        gzId: "",
        official: "",
        department: "",
        merchant: "",
        token: "",
        appid: "",
        secret: "",
        images: "",
        aesKey: "",
      },
      addDataRules: {
        name: [
          { required: true, message: "请输入公众号名称", trigger: "blur" },
        ],
        gzId: [{ required: true, message: "请输入公众号ID", trigger: "blur" }],
        aesKey: [
          { required: true, message: "请输入消息加解密密钥", trigger: "blur" },
        ],
        official: [
          { required: true, message: "请选择公众号类型", trigger: "change" },
        ],
        department: [
          { required: true, message: "请选择所属部门", trigger: "change" },
        ],
        merchant: [
          { required: true, message: "请选择商户", trigger: "change" },
        ],
        token: [{ required: true, message: "请输入令牌", trigger: "blur" }],
        appid: [{ required: true, message: "请输入APP ID", trigger: "blur" }],
        secret: [
          { required: true, message: "请输入APP Secret", trigger: "blur" },
        ],
        images: [
          { required: true, message: "请选择上传的图片", trigger: "blur" },
        ],
      },
      selectList: [],
      selectType: [],
      parArray: [],
      merchantlist: [],
      fileListImg: [], //上传图片
    };
  },
  activated () {
    this.department();
    this.merchantSelect();
  },
  created () {
    this.listAxios();
    // 权限设定判断
    let limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = limits.buttonTreeDto.filter(
      (item) => item.menuCode === "officialList"
    );
    if (params[0]) {
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code);
      });
    }
    // 权限设定判断
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  methods: {
    //   重置
    setEvent () {
      this.pageNo = 1;
      this.pageSize = 10;
      this.searchForm = {
        official: "",
        name: "",
      };
      this.listAxios();
    },
    // 部门选择列表
    department () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=sales_authority", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.selectList = res.data;
          } else {
            this.$message.error(res.message);
          }
        });

      this.axios
        .get("/sys/v1/common/by/group?groupId=wx_type", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.selectType = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 下拉框商户号列表
    merchantSelect () {
      this.axios
        .get("/wechat/wx/config/selectPayName", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.merchantlist = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    searchEvent () {
      this.pageNo = 1;
      this.pageSize = 10;
      this.listAxios();
    },
    listAxios () {
      this.axios
        .post("wechat/wx/config/selectWxconfig", {
          name: this.searchForm.name,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          type: this.searchForm.official,
        })
        .then((res) => {
          if (res.code == 0) {
            for (let i in res.data.list) {
              res.data.list[i].edit = false;
              res.data.list[i].appId1 = res.data.list[i].appId;
              res.data.list[i].payId1 = res.data.list[i].payId;
              res.data.list[i].appSecret1 = res.data.list[i].appSecret;
              res.data.list[i].payName1 = res.data.list[i].payName;
              res.data.list[i].salesPermissionId1 =
                res.data.list[i].salesPermissionId;
              res.data.list[i].salesPermission1 =
                res.data.list[i].salesPermission;
              res.data.list[i].token1 = res.data.list[i].token;
              res.data.list[i].type1 = res.data.list[i].type;
              res.data.list[i].wxName1 = res.data.list[i].wxName;
            }
            this.tableData = res.data;

            console.log(res);
          } else {
            this.$message.error(res.message);
          }
        });
    },

    // 取消修改
    fixData (param, row) {
      this.dialogVisible = true;
      this.param = param;
      this.fileListImg = [];
      if (param == 1) {
        this.addData = {
          id: "",
          name: "",
          gzId: "",
          official: "",
          department: "",
          merchant: "",
          token: "",
          appid: "",
          secret: "",
          images: "",
          aesKey: "",
        };
      } else {
        this.fileListImg.push({ img: row.sendImages.replace(",", "") });
        this.addData = {
          id: row.id,
          name: row.wxName,
          official: row.type,
          department: row.salesPermissionId,
          merchant: Number(row.payId) == 0 ? "" : Number(row.payId),
          token: row.token,
          appid: row.appId,
          secret: row.appSecret,
          images: row.sendImages,
          aesKey: row.aesKey,
          gzId: row.wxId,
        };
      }
    },

    add: _.debounce(function (formName) {
      if (this.fileListImg) {
        this.fileListImg.forEach((res) => {
          this.addData.images = res.img;
        });
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post("wechat/wx/config/addConfig", {
              appId: this.addData.appid,
              appSecret: this.addData.secret,
              name: this.addData.name,
              payId: this.addData.merchant == "" ? 0 : this.addData.merchant,
              salesPermission: this.addData.department, //部门
              sendImages: this.addData.images,
              token: this.addData.token,
              type: this.addData.official, //1：服务，2：订阅
              aesKey: this.addData.aesKey,
              wxId: this.addData.gzId,
            })
            .then((res) => {
              if (res.code == 0) {
                this.listAxios();
                this.$message.success("添加成功");
                this.dialogVisible = false;
                this.fileListImg = [];
                this.addData = {
                  applicationId: "",
                  fieldName: "",
                  fieldCode: "",
                };
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          return false;
        }
      });
    }, 300),
    update: _.debounce(function (formName) {
      if (this.fileListImg) {
        this.fileListImg.forEach((res) => {
          this.addData.images = res.img;
        });
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(
              "wechat/wx/config/updateConfig",
              {
                id: this.addData.id,
                appId: this.addData.appid,
                appSecret: this.addData.secret,
                name: this.addData.name,
                payId: this.addData.merchant == "" ? 0 : this.addData.merchant,
                salesPermission: this.addData.department, //部门
                sendImages: this.addData.images,
                token: this.addData.token,
                type: this.addData.official, //1：服务，2：订阅
                aesKey: this.addData.aesKey,
                wxId: this.addData.gzId,
              },
              {
                headers: {
                  isLoading: false,
                },
              }
            )
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("修改成功");
                this.dialogVisible = false;
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          return false;
        }
      });
    }, 300),
    handleCurrentChange (val) {
      this.pageNo = val;
      this.listAxios();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.listAxios();
    },

    // 删除
    delectEvent: _.debounce(function (row) {
      this.$confirm("确定要删除该公众号配置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/wechat/wx/config/deleteConfig?id=" + row.id)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("删除成功");
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, 300),

    getImageBySrc (e) {
      if (!e) {
        return "";
      }
      return e.split(",")[0];
    },

    // 上传图片
    test () {
      this.$message.warning(
        "只能上传1张,现在已上传" + this.fileListImg.length + "张"
      );
    },
    imgUpload (fileObj) {
      let length = this.fileListImg.length;
      let formData = new FormData();
      formData.append("file", fileObj.file);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      if (length <= 1) {
        this.axios
          .post(
            "/sys/v1/common/upload/files?pathName=internalSystem",
            formData,
            config,
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              // this.imageUrl = res.data.url;
              let obj = {
                img: res.data.url,
                creattime: new Date().toLocaleDateString(),
              };
              this.fileListImg.push(obj);
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.$message.warning("只能上传一张");
      }
    },
    beforeUploadImg (file) {
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL;
        let isLt2M = file.size / 1024 / 1024 > 4; // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        let img = new Image();
        img.onload = function () {
          file.width = img.width; // 获取到width放在了file属性上
          file.height = img.height; // 获取到height放在了file属性上
          let valid = img.width > 2000; // 图片宽度大于2000
          // console.log(11, file)
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (valid || isLt2M) {
            imageConversion
              .compressAccurately(file, {
                size: 400,
                width: 2000,
              })
              .then((res) => {
                // console.log(33, res)
                resolve(res);
                this.$message.success(
                  "成功添加" + this.fileList.length + "张图片"
                );
              });
          } else resolve(file);
        }; // 需要把图片赋值
        img.src = _URL.createObjectURL(file);
      });
    },
    //删除图片
    deleteImg (index) {
      this.fileListImg.splice(index, 1);
      this.addData.images = "";
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.table {
  margin-top: 10px;
  margin-bottom: 40px;
}
/deep/.el-select {
  width: 100%;
}
/deep/.vxe-cell--title {
  color: #333;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  border-radius: 5px 10px 0px 5px;
  background: #fff;
  padding: 10px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  span {
    font-size: 15px;
    // color: #2d7edf;
    padding-bottom: 10px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

/deep/ .query .el-input__inner {
  width: 180px;
  margin-left: 10px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  float: left;
  margin-left: 20px;

  img {
    width: 25px;
    height: 25px;
  }
}
.operation:hover {
  cursor: pointer;
}
.table {
  margin: 0px;

  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.option {
  span {
    padding: 0 5px;
    color: #0066ff;
  }
  span:hover {
    cursor: pointer;
  }
}
.selectTree {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 30px;

  /deep/.el-cascader .el-input .el-input__inner {
    line-height: 30px;
    height: 30px;
    width: 100%;
  }
  /deep/.el-cascader .el-input {
    width: 250px;
  }
  /deep/.vue-treeselect {
    height: 30px;
  }
  /deep/.vue-treeselect--searchable .vue-treeselect__input-container {
    height: 30px;
    line-height: 30px;
  }
  /deep/.vue-treeselect__single-value {
    font-size: 14px;
    line-height: 30px;
  }
  /deep/.vue-treeselect__menu-container {
    font-size: 15px;
  }
  /deep/.vue-treeselect__multi-value-item {
    height: 20px;
    line-height: 20px;
    padding: 0;
  }
  /deep/.vue-treeselect__input {
    height: 27px;
    line-height: 27px;
    outline: none;
    border: none;
    padding: 0;
    // display: none;
    // border:1px solid #000;
  }
  /deep/.vue-treeselect__placeholder {
    font-size: 10px;
    line-height: 28px;
  }
  /deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/.vue-treeselect__control {
    height: 30px;
  }
}
</style>
